<template>
  <div class="discovery">
    <van-nav-bar :fixed="true" left-arrow @click-right="onClickRight">
      <template #left>
        <span>发现</span>
      </template>
      <template #right>
        <van-icon name="search" size="18" color="#000000" />
      </template>
    </van-nav-bar>

    <div class="conter" :style="{height:(fullHeight-46-50) +'px' }">
      <van-search
        v-model="searchKey"
        shape="round"
        show-action
        background="#4fc08d"
        placeholder="请输入"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>

      <div
        class="bg-box"
        :style="{height:(fullHeight-46-50-54) +'px',backgroundImage: 'url(' + coverImgUrl + ')', backgroundSize:'cover' }"
      >
        <div class="audio-box">
          <audio @canplay="getDuration" @timeupdate="updateTime" ref="music">
            <source :src="currentAudio" type="audio/mpeg" />您的浏览器不支持 audio 元素。
          </audio>
          <van-row>
            <van-col span="24">
              <van-row type="flex" align="center" justify="space-around">
                <van-col span="3" style="font-size: 10px;">{{formatSeconds(currentTime)}}</van-col>
                <van-col span="18">
                  <van-slider
                    button-size="5"
                    bar-height="1"
                    v-model="currentTime"
                    :min="0"
                    :max="duration"
                    @change="onChange"
                  />
                </van-col>
                <van-col span="3" style="font-size: 10px;">{{formatSeconds(duration)}}</van-col>
              </van-row>
            </van-col>
            <van-col span="24" style="margin-top:9px;">
              <van-row type="flex" align="center" justify="space-around">
                <van-col span="4">
                  <van-icon
                    :color="loop ? '#1989fa' : '#ffffff'"
                    @click="doLoop"
                    size="24"
                    name="replay"
                  />
                </van-col>
                <van-col span="4">
                  <van-icon size="24" name="arrow-left" />
                </van-col>
                <van-col span="4">
                  <van-icon
                    size="30"
                    @click="doPlay"
                    :name="play ? 'pause-circle-o' : 'play-circle-o'"
                  />
                </van-col>
                <van-col span="4">
                  <van-icon size="24" name="arrow" />
                </van-col>
                <van-col span="4">
                  <van-icon size="24" name="bar-chart-o" @click="popup" />
                </van-col>
              </van-row>
            </van-col>
          </van-row>
        </div>
      </div>
    </div>
    <van-popup v-model="show" closeable position="bottom" :style="{ height: '30%' }" />
    <Menu />
  </div>
</template>

<script>
import Menu from "../components/Menu";
import userBg from "@/assets/myuser-bg.jpg";
import qs from "qs";

export default {
  name: "Discovery",
  components: {
    Menu
  },
  data() {
    return {
      fullWidth: document.documentElement.clientWidth,
      fullHeight: document.documentElement.clientHeight,
      coverImgUrl: userBg,
      searchKey: "",
      music: null,
      play: false,
      currentTime: 0,
      duration: 0,
      loop: false,
      show: false,
      currentAudio: "http://oss.tpshion.cn/3f2bf961559a44128b43d9da9301e488.mp3"
    };
  },
  methods: {
    /**
     * 动态获取浏览器宽高
     */
    handleResize() {
      this.fullWidth = document.documentElement.clientWidth;
      this.fullHeight = document.documentElement.clientHeight;
    },
    onClickRight() {},
    onSearch() {
      if (this.searchKey.length > 0) {
        const toast = this.$toast.loading({
          duration: 0,
          message: "搜索中...",
          forbidClick: true
        });
        let data = {
          input: this.searchKey,
          filter: "name",
          type: "netease",
          page: 1
        };
        setTimeout(() => {
          toast.clear();
        }, 2000);
        this.axios
          .post("https://www.mlwei.com/music/so/", qs.stringify(data))
          .then(res => {
            console.log(res);
          })
          .catch(err => {
            console.log(err);
          });
      } else {
        this.$toast("请先输入搜索内容");
      }
    },
    onChange(value) {
      this.music.currentTime = value;
    },
    doPlay() {
      let status = this.music.paused; //如果媒体文件被暂停，则返回true，否则返回false
      if (status) {
        this.play = true;
        this.music.play();
      } else {
        this.play = false;
        this.music.pause();
      }
    },
    updateTime(e) {
      this.currentTime = e.target.currentTime; //获取audio当前播放时间
    },
    getDuration() {
      this.duration = this.$refs.music.duration;
    },
    formatSeconds(value) {
      var theTime = parseInt(value); // 秒
      var middle = 0; // 分
      var hour = 0; // 小时
      if (theTime > 60) {
        middle = parseInt(theTime / 60);
        theTime = parseInt(theTime % 60);
        if (middle > 60) {
          hour = parseInt(middle / 60);
          middle = parseInt(middle % 60);
        }
      }
      var result =
        "00:" +
        (parseInt(theTime) < 10 ? "0" + parseInt(theTime) : parseInt(theTime));
      if (middle > 0) {
        result =
          "" +
          (parseInt(middle) < 10 ? "0" + parseInt(middle) : parseInt(middle)) +
          ":" +
          (parseInt(theTime) < 10
            ? "0" + parseInt(theTime)
            : parseInt(theTime));
      }
      if (hour > 0) {
        result = "" + parseInt(hour) + ":" + result;
      }
      return result;
    },
    doLoop() {
      let loop = this.music.loop;
      if (loop) {
        this.music.loop = false;
        this.loop = false;
      } else {
        this.music.loop = true;
        this.loop = true;
      }
    },
    popup() {
      this.show = !this.show;
    }
  },
  mounted() {
    this.music = this.$refs.music;
  },
  created() {
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy: function() {
    window.removeEventListener("resize", this.handleResize);
  },
  watch: {}
};
</script>

<style lang="scss" scoped>
.discovery {
  .van-nav-bar {
    background-color: #f8f8f9;
  }

  .conter {
    width: 100%;
    margin-top: 46px;
    margin-bottom: 50px;

    .bg-box {
      .audio-box {
        position: fixed;
        bottom: 50px;
        height: 60px;
        width: 100%;
        text-align: center;
        padding-top: 8px;
        background-color: rgba(0, 0, 0, 0);
        color: #ffffff;
      }
    }
  }
}
</style>